/**
 * SearchDialog
 */
/*
 *
 * 1.外部调入 ./components/Recognize/index  saveRecognizeProperty  上传数据
 *
 * */
 var React = require("react");
 var tool = require("../../../utils/tool");
 var CommonDialog = require("./CommonDialog");
 var SearchDialog = React.createClass({
    mixins: [CommonDialog],
    getInitialProps: function (){
        return {
            data: {}
        }
    },
    getInitialState: function (){
        return {
            search: "",
            isInvalid: true
        }
    },
    componentWillMount: function (){
        this.iframe = this.getIframe();
        this.iframe.on('load', function (){
            // IP定位
            this.iframe[0].contentWindow.setCurrentCity(function (result){
                this.locateCallback(result);
                if (this.search){
                    this.placeSearch(this.cityCode, this.search);
                }
            }.bind(this));
            // 附近搜索
            this.placeSearch = this.iframe[0].contentWindow.placeSearch;
        }.bind(this));

        // 城市编码
        this.cityCode = "";
        var data = this.props.data;
        if (!data || tool.isEmptyObject(data)){
            data = {
                search: ""
            };
        }
        this.search = data.search;
        this.setState({
            search: this.search,
            isInvalid: !this.search.length
        });
    },
    componentDidMount: function (){
        this.initElements();
        this.iframe.appendTo(this.elements.gmappicker);
    },
    initElements: function (){
        this.elements = {
            gmappicker: $(this.refs.gmappicker)
        };
    },
    locateCallback: function (result){
        this.cityCode = result.adcode;
    },
    getIframe: function (){
        return $('<iframe>').attr({
            src: window.is.CONST.urls.gmap + "?tip=0",
            width: '600',
            height: '400',
            frameborder: 0,
            allowtransparency: 1
        });
    },
    handleOnChangeSearch: function (e){
        var keyword = $(e.target).val();
        this.setState({
            search: keyword,
            isInvalid: !keyword.length
        });
    },
    handleOnSearch: function (){
        var search = this.state.search;
        if(!this.placeSearch){
            alert("正在加载地图，请稍等...");
            return;
        }
        this.placeSearch(this.cityCode, search);
    },
    handleOnSubmit: function (){
        this.props.saveRecognizeProperty({
            search_nearby: {
                search: this.state.search
            }
        });
        this.handleOnCloseDialog();
    },
    render: function (){
        var gStyle = {
            height: "405px"
        };
        return (
            <div className="dialog-wrap">
                <div className="dialog-overlay"></div>
                <dialog ref="dialog" style={this.rStyle} className="btg-modal widget-form">
                    <div className="btg-modal-content location-region">
                        <div className="form-horizontal">
                            <div className="widget-form-title">
                                <label>附近搜索</label>
                            </div>
                            <div className="form-group">
                                <input ref="search" name="search" type="text" onChange={this.handleOnChangeSearch} value={this.state.search} className="form-control address" />
                                <button onClick={this.handleOnSearch} type="button">{$._("Search")}</button>
                            </div>
                            <div className="form-group">
                                <div className="gmap-tip">将在地图中显示用户位置附件的关键字信息</div>
                                <div style={gStyle} ref="gmappicker" className="gmap-gmappicker"></div>
                            </div>
                            <div className="form-group buttons">
                                <button disabled={this.state.isInvalid} onClick={this.handleOnSubmit} type="button">{$._("Confirm")}</button>
                            </div>
                        </div>
                    </div>
                    <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
                </dialog>
            </div>
        )
    }
 });

 module.exports = SearchDialog;
